<template>
  <div id="app">
    <el-form
      ref="form"
      status-icon
      :rules="rules"
      :model="teacher"
      label-width="80px"
    >
      <el-form-item label="讲师名称" prop="name">
        <el-input
          autocomplete="off"
          v-model="teacher.name"
          placeholder="请输入讲师名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" placeholder="请选择">
          <!-- :代表用的是vue指令，指令会跟着data的变化而变化 -->
          <el-option label="首席讲师" :value="1"></el-option>
          <el-option label="高级讲师" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input
          v-model="teacher.career"
          placeholder="请输入讲师资历"
        ></el-input>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input
          placeholder="请输入讲师简介"
          :rows="10"
          type="textarea"
          v-model="teacher.intro"
        ></el-input>
      </el-form-item>
      <el-form-item label="讲师头像">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8081/upload/pic"
          :show-file-list="false"
          :on-success="avatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="teacher.avatar" :src="teacher.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-button class="b" @click="save" type="primary">保存</el-button>
      <el-form-item> </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    var validateName = (rule, value, callback) => {
      if (value.trim() === "" || value === undefined) {
        callback(new Error("讲师名称不能为空"));
      }
    };
    return {
      teacher: {
        id: "",
        name: "",
        level: "",
        career: "",
        intro: "",
        avatar: "",
      },
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
      },
    };
  },
  created() {
    this.init();
  },
  //只要页面路径发生改变就会执行
  watch: {
    $route(to, from) {
      this.init();
    },
  },
  methods: {
    getTeacher(id) {
      this.$http.post("/teacher/getTeacher/" + id).then((res) => {
        this.teacher = res.data.data;
      });
    },
    init() {
      let id = this.$route.params.id;
      if (id) {
        //在这里根据讲师id查询讲师信息，并把信息绑定到页面去
        this.getTeacherById(id);
      } else {
        this.teacher = {
          id: "",
          name: "",
          level: "",
          career: "",
          intro: "",
          avatar: "",
        };
      }
    },
    avatarSuccess(res, file) {
      this.teacher.avatar = res.data;
    },
    save() {
      if (this.teacher.id) {
        this.$http.post("/teacher/updateTeacher", this.teacher).then((res) => {
          this.$message({
            message: "修改讲师成功",
            type: "success",
          });
          this.$router.push("/showteacher");
        });
      } else {
        this.$http.post("/teacher/addTeacher", this.teacher).then((res) => {
          this.$message({
            message: "添加讲师成功",
            type: "success",
          });
          this.$router.push("/showteacher");
        });
      }
    },
  },
};
</script>

<style scoped>
.avatar-uploader :deep() .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 130px;
  height: 130px;
}
.avatar-uploader :deep() .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.b {
  position: absolute;
  left: 300px;
}
</style>
